import React,{lazy} from 'react'

import Home from '../views/Home'
//Navigate 重定向组件
import {Navigate} from 'react-router-dom' 

// lazy  路由懒加载
// const About = lazy(() => import('../views/About'))
// const User = lazy(() => import('../views/User'))
const BookingData = lazy(() => import('../views/BookingData'))
const Room = lazy(() => import('../views/Room'))
const Customer = lazy(() => import('../views/Customer'))
const Login = lazy(() => import('../views/Login'))
const Official = lazy(() => import('../views/Official'))
const Booking = lazy(() => import('../views/Booking'))
const Bill = lazy(() => import('../views/Bill'))


const withLodingComponent = (cpt:JSX.Element) => <React.Suspense fallback={ <div>loding....</div> }>{cpt}</React.Suspense>


const router = [
    {
        path: '/',
        element: <Navigate to='/bookingData'/>
    },
    {
        path: '/',
        element: <Home />,
        children:[
            {
                path: '/bookingData',
                element: withLodingComponent(<BookingData />)
            },
            {
                path: '/room',
                element: withLodingComponent(<Room />)
            },
            {
                path: '/customer/data',
                element:  withLodingComponent(<Customer />)
            },
            {
                path: '/bill',
                element:  withLodingComponent(<Bill />)
            }
        ]
    },
    {
        path: '*', // 访问不存在的页面时重定向到page1
        element: <Navigate to='/bookingData'/>
    },
    {
        path: '/login',
        element: withLodingComponent(<Login />)
    },
    {
        path: '/official', 
        element: withLodingComponent(<Official />)
    },
    {
        path: '/booking', 
        element: withLodingComponent(<Booking />)
    }
]

export default router